<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
    <div id="app">
        <el-container>
            <!--侧边栏-->
            <el-aside width="200px">
                <div style="background: #b3d8ff;width:100%;padding: 5px 10px">
                    <span style="font-size: 20px;color: #fff;">现有部门列表</span>
                </div>
                <el-menu
                        @select="selectOne"
                        @open="selectOne"
                        class="el-menu-vertical-demo">
                    <el-submenu  :index="f.id"  v-for="f in department" v-if="f.pid==0">
                        <template slot="title">
                            <i class="el-icon-folder"></i>
                            <span>{{f.name}}</span>
                        </template>
                        <el-menu-item-group v-for="c in f.departments">
                            <el-menu-item :index="c.id">
                                <template slot="title">
                                    <i class="el-icon-tickets"></i>
                                    <span>{{c.name}}</span>
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <!--顶栏-->
                <div style="width:100%">
                    <div style="background-color: #eee;width: 100%;padding: 5px 10px 5px 30px">
                    <span style="font-size: 20px" >销售部部门信息</span>
                    </div>
                    <!--主栏-->
                    <div>
                        <br>
                        <br>
                        <el-button type="warning" icon="el-icon-plus" style="margin-left: 480px" v-if="tableData.pid==0"   @click="pj">新增下级部门</el-button>
                        &emsp;&emsp;&emsp;
                        <el-button type="danger" icon="el-icon-delete" v-if="tableData.pid==0" @click="deleteDepartment">删除该部门</el-button>
                        <el-button type="danger" icon="el-icon-delete" v-if="tableData.pid !=0" style="margin-left: 530px" @click="deleteDepartment">删除该部门</el-button>
                        <br>
                        <br>
                        <el-form :model="tableData">
                                <el-form-item label="部门编号:" style="padding-left: 400px">
                                    <el-input v-model="tableData.no" style="width: 300px"></el-input>
                                </el-form-item>
                                <el-form-item label="部门名称:"  style="padding-left: 400px">
                                    <el-input v-model="tableData.name" style="width: 300px"></el-input>
                                </el-form-item>
                                <el-form-item label="部门经理:" style="padding-left: 400px">
                                    <el-input v-model="tableData.manager" style="width: 300px"></el-input>
                                </el-form-item>
                                <el-form-item label="联系电话:" style="padding-left: 400px">
                                    <el-input v-model="tableData.phone" style="width: 300px"></el-input>
                                </el-form-item>

                                <el-form-item label="固定电话:" style="padding-left: 400px">
                                    <el-input v-model="tableData.tel" style="width: 300px"></el-input>
                                </el-form-item>
                                <el-form-item label="邮&emsp;&emsp;箱:" style="padding-left: 400px">
                                    <el-input v-model="tableData.email" style="width: 300px"></el-input>
                                </el-form-item>

                                <el-form-item label="部门职位:" style="padding-left: 400px">

                                    <el-select v-model="tableData.fPoName" placeholder="请选择职位">
                                        <el-option
                                                v-for="t in tPost"
                                                :label="t.name"
                                                :value="t.name">
                                        </el-option>
                                    </el-select>
                                    <!--<el-input v-model="tableData.fPoName" style="width: 300px"></el-input>-->
                                </el-form-item>

                                <el-form-item label="部门简介:"  style="padding-left: 400px">
                                    <el-input
                                            style="width: 300px"
                                            type="textarea"
                                            :rows="2"
                                            placeholder="请输入内容"
                                            v-model="tableData.intro">
                                    </el-input>
                                </el-form-item>

                            </el-form>
                            <div slot="footer" class="dialog-footer" style="margin-left: 520px">
                                <el-button @click="qingkong">取 消</el-button>
                                <el-button type="primary" @click="updateDepartment">确 定</el-button>
                            </div>
                    </div>
                </div>
            </el-container>
        </el-container>
        <el-dialog title="部门管理操作" :visible.sync="dialogFormVisible"  @close="closeMyDialog">
            <el-form :model="dataOne">
                <el-form-item label="部门编号:" :label-width="formLabelWidth">
                    <el-input v-model="dataOne.no" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门名称:" :label-width="formLabelWidth">
                    <el-input v-model="dataOne.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门经理:" :label-width="formLabelWidth">
                    <el-input v-model="dataOne.manager" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" :label-width="formLabelWidth">
                    <el-input v-model="dataOne.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="固定电话:" :label-width="formLabelWidth">
                    <el-input v-model="dataOne.tel" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="邮箱:" :label-width="formLabelWidth">
                    <el-input v-model="dataOne.email" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="部门简介:" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入内容"
                            v-model="dataOne.intro">
                    </el-input>
                    <!-- <el-input v-model="logistics.remarks" autocomplete="off"></el-input>-->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRoles">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    tPost:[],
                    formLabelWidth:"120px",
                    dialogFormVisible:false,
                    dataOne:{
                        fPoName:"",
                        id:"",
                        pid:"",
                        no:"",
                        name:"",
                        manager:"",
                        phone:"",
                        tel:"",
                        email:"",
                        intro:"",
                        cId:"",
                        fId:"",
                        fDId:"",
                    },
                    tableData:{
                     fPoName:"",
                     id:"",
                     pid:"",
                     no:"",
                     name:"",
                     manager:"",
                    phone:"",
                     tel:"",
                     email:"",
                    intro:"",
                    cId:"",
                    fId:"",
                    fDId:"",
                    },
                    department:[],
                }
            },
            //函数定义
            methods:{
                qingkong(){
                    axios.get("/departmentOne?id="+this.tableData.id).then(value => {
                        if(value.data.code == 1){
                            this.tableData = value.data.data;
                        }
                    })
                },

                pj(){
                    if(this.tableData.id==''){
                        alert("您还没有选择部门,请选择部门后再添加")
                }else {
                        this.dialogFormVisible=true
                    }
            },

                //添加
                saveRoles(){
                        this.dataOne.pid=this.tableData.id;
                        axios.post("/department",this.dataOne).then(value => {
                            if(value.data.code==1){
                                this.F5();
                            }
                        });
                        this.dialogFormVisible= false;
                },

                //输入框清空
                closeMyDialog(){
                    this.dataOne={
                        fPoName:"",
                        id:"",
                        pid:"",
                        no:"",
                        name:"",
                        manager:"",
                        phone:"",
                        tel:"",
                        email:"",
                        intro:"",
                        cId:"",
                        fId:"",
                        fDId:"",
                    }
                },


                //删除
                deleteDepartment(){
                   if(confirm("您确定要删除该部门吗?")) {
                       axios.delete("/department/"+this.tableData.id).then(value => {
                           if(value.data.code==1){
                               this.F5();
                               this.tableData={
                                   fPoName:"",
                                   id:"",
                                   pid:"",
                                   no:"",
                                   name:"",
                                   manager:"",
                                   phone:"",
                                   tel:"",
                                   email:"",
                                   intro:"",
                                   cId:"",
                                   fId:"",
                                   fDId:"",
                               }
                           }
                       })
                   }
                },

                //修改
                updateDepartment(){
                    if(this.tableData.fPoName==null){
                        alert("您还没有选择部门职位")
                    }else {
                        axios.put("/department",this.tableData).then(value => {
                            if(value.data.code==1){
                                this.F5();
                                this.tableData={
                                    fPoName:"",
                                    id:"",
                                    pid:"",
                                    no:"",
                                    name:"",
                                    manager:"",
                                    phone:"",
                                    tel:"",
                                    email:"",
                                    intro:"",
                                    cId:"",
                                    fId:"",
                                    fDId:"",
                                }
                            }
                        })
                    }

                },



                selectOne(index){
                    axios.get("/departmentOne?id="+index).then(value => {
                        if(value.data.code == 1){
                            this.tableData = value.data.data;
                        }
                    })
                },

                //每次删除增加成功后进行页刷新
                F5(){
                    axios.get("/departments").then(value => {
                        if(value.data.code==1){
                            this.department=value.data.data;
                            console.log(this.department)
                        }
                    });
                }

            },

            //页面加载成功回调
            mounted(){
                   this.F5();

                    //查询所有的部门职位
                    axios.get("/tPost").then(value => {
                        if(value.data.code==1){
                            this.tPost=value.data.data;
                        }
                    })
            }
        })
    </script>
</body>
</html>